<template>
	<view class="competion">
		<template v-for="(item,index) in list">
			<view class="box" :key="item.projectId" @click="showMsg(item,index)">
				<view class="left">
					<view class="top f18 overflow-ellipsis">{{item.projectName}}</view>
					<view class="f14" style="color: #58aeef;">报名截止剩<text style="color: red;">{{item.day}}</text>天
					</view>
					<view class="middle f14">举行时间({{item.startTime}})</view>
				</view>
				<view class="right">
					<view class="tag-view">
						<template v-for="tag in item.tagList">
							<view class="mjcTag" :key="tag">{{tag}}</view>
						</template>
					</view>
				</view>
			</view>
		</template>
		<view class="bot" v-if="done && list.length > 0">没有了</view>
		<view class="bot" v-if="done && list.length == 0">
			<notFoundData />
		</view>
	</view>

</template>

<script>
	import notFoundData from '@/components/notFoundData/index.vue'
	import * as utils from '@/utils/index.js'
	export default {
		props: {
			competionLimit: {
				required: true,
				type: Number
			}
		},
		components: {
			notFoundData
		},
		data() {
			return {
				isInitalSearch: false,
				done: false,
				item: null,
				list: [],
				total: 0,
				formData: {
					createDepartment: null,
					endDate: null,
					instituteType: null,
					pageNum: 1,
					pageSize: this.competionLimit || 10
				}
			};
		},
		methods: {
			reloadSearch(data) {
				this.total = 0
				this.item = null
				this.list = []
				this.done = false
				this.formData.createDepartment = data.createDepartment || null
				this.formData.endDate = data.endDate || null
				this.formData.instituteType = data.instituteType
				this.formData.pageNum = 1
				this.$nextTick(() => {
					this.getData()
				})
			},
			async getData() {
				const data = {
					...this.formData
				}

				try {
					const result = await this.$mjcrequest.request({
						url: this.$api.getMygetGame,
						data: JSON.stringify(data)
					})
					this.total = result.total
					//没数据
					if (result.total == 0) {
						this.done = true
						this.list = []
						this.$emit('updatecompetionDone')
						this.$emit('cloesNgnationLoading')
						console.log(this.list, 82);
						return
					}
					//一页
					this.list = this.filterList(result)
					if (result.total <= this.competionLimit) {
						this.done = true
						this.$emit('updatecompetionDone')
						this.$emit('cloesNgnationLoading')
						return
					}
					//至少两页
					this.$nextTick(() => {
						this.$emit('updateTotal', result.total, 'competion')
					})

				} catch (e) {
					this.$errMessageToast(e)
					//TODO handle the exception
				}
			},
			showMsg(item, index) {
				this.item = item,
					this.$nextTick(() => {
						uni.navigateTo({
							url: `/pages/information/competionMsg/competionMsg`
						})
					})
			},
			competionMsgSend() {
				this.$eventBus.$emit('competionMsgSend', this.item)
			},
			async pagination(page, done) {
				try {
					const limit = this.competionLimit

					this.formData.pageNum = page
					console.log(page, 'page');
					const data = {
						...this.formData
					}
					const result = await this.$mjcrequest.request({
						url: this.$api.getMygetGame,
						data: JSON.stringify(data)
					})
					this.list = [...this.list, ...this.filterList(result)]
					this.$emit('cloesNgnationLoading')
					console.log(this.list, 77);
					if (done) {
						this.done = true
						this.$emit('updatecompetionDone')
						return
					}
				} catch (e) {
					//TODO handle the exception
					this.$errMessageToast(e)
				}
			},
			filterList(list) {
				//处理列表数据
				let newList = []
				newList = list.pageDate.map(item => {
					const createDepartment = item.project.createDepartment
					let instituteTypeDesc = ''
					switch (item.project.instituteType) {
						case 0:
							instituteTypeDesc = '文科'
							break;
						case 1:
							instituteTypeDesc = '理科'
							break;
						case 2:
							instituteTypeDesc = '专业不限'
							break;
					}
					const tagList = []
					tagList.push(createDepartment)
					tagList.push(instituteTypeDesc)

					return {
						imgUrl: item.imgUrl || [],
						likes: item.likes,
						tags: item.tags || [],
						...item.project,
						day: utils.computedDownTime(item.project.endTime),
						tagList: tagList
					}
				})

				return newList
			}
		},
		destroyed() {
			this.$eventBus.$off('competionMsg')
			this.$eventBus.$off('competionReload')
		},
		async created() {
			//eventBus
			this.$eventBus.$on('competionMsg', () => {
				this.competionMsgSend()
			})
			this.$eventBus.$on('competionReload', ({
				page,
				done
			}) => {

				this.pagination(page, done)
			})

			this.getData()
		}
	}
</script>

<style lang="less">
	.competion {
		padding: 0 15rpx;

		.bot {
			text-align: center;
			color: #dedfdf;
			font-size: 14px;
		}

		.box {
			margin: 25rpx 0;
			width: 100%;
			height: 150rpx;
			background-color: #fff;
			border-radius: 15rpx;
			padding: 10rpx 20rpx 15rpx 20rpx;
			box-sizing: border-box;
			font-weight: 550;
			display: flex;
			box-shadow: 0 4px 8px 2px #f0f1f1 !important;

			.left {
				width: 50%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.right {
				width: 50%;
				box-sizing: border-box;

				.tag-view {
					width: 100%;
					height: 100%;
					flex-wrap: wrap;
					white-space: pre-wrap;
					word-wrap: break-word;
					text-align: right;
					display: flex;
					align-items: center;
					overflow: auto;

					.mjcTag {
						padding: 5rpx;
						color: #2979ff;
						border-color: #2979ff;
						border-radius: 2px;
						font-size: 12px;
						line-height: 14px;
						border-width: 1rpx;
						border-style: solid;
						font-weight: 300;
						display: inline-block;
						margin: 12rpx;
					}
				}

			}
		}
	}
</style>
